<template>
	<view class="business-box">
		<view>
			<uv-form :model="busform" :labelWidth="80" :rules="rules" ref="form">

				<uv-form-item label="真实姓名" prop="realname" required borderBottom>
					<uv-input v-model="busform.realname" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="门店名称" prop="shopname" required borderBottom>
					<uv-input v-model="busform.shopname" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="门店位置" prop="shoplocation" required @click="tomap" borderBottom>
					<uv-input disabled v-model="busform.shoplocation" disabledColor="#ffffff" border="none"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item>
					<view class="form-lable">
						<view>上传<text class="point">营业执照</text>或<text class="point">本人与门店合照</text></view>
						<view class="text-gray">({{img_license.length}}/1)</view>
					</view>
					<uv-upload :file-list="img_license" name="license" :max-count="1"
						@afterRead="afterRead"></uv-upload>
				</uv-form-item>
				<uv-form-item>
					<view class="form-lable">
						<view>上传门头照片</view>
						<view class="text-gray">({{img_license.length}}/1)</view>
					</view>
					<uv-upload :file-list="img_shop" name="shop" :max-count="1" @afterRead="afterRead"></uv-upload>
				</uv-form-item>
				<uv-form-item>
					<view class="form-lable">
						<view>上传展厅图片</view>
						<view class="text-gray">({{img_display.length}}/9)</view>
					</view>
					<uv-upload :file-list="img_display" name='display' :max-count="9" multiple
						@afterRead="afterRead"></uv-upload>
				</uv-form-item>
				<view class="businessbtn" v-if="busform.status!='1'">
					<uv-button @click="onRest" type="info" plain shape="circle">清空图片</uv-button>
					<uv-button @click="onSave" type="primary" shape="circle">保存</uv-button>
				</view>
				
			</uv-form>
		</view>

	</view>
</template>

<script>
	import { uploadBusinessImg, uploadBusinessInfo, queryUserBusinessInfo, removeAllBusiImg } from '@/utils/http.js'
	import basconfig from '@/config.js'
	import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	import config from '@/config.js'
	export default {
		data() {
			return {
				busform: {
					realname: '',
					shopname: '',
					shoplocation: '',
					infoid: 0,
					status: '2',
					isnew: 0
				},
				rules: { realname: { type: 'string', required: true, trigger: ['blur', 'change'], message: '填写真实姓名' }, },
				qqmapsdk: null,
				img_license: [],
				img_shop: [],
				img_display: []

			}
		},
		onLoad() {
			this.fetchStuts()
			this.qqmapsdk = new QQMapWX({
				key: config.qqmapkey
			})
			uni.$on('selectaddr', this.setaddr)
		},
		methods: {
			setaddr(data) {
				this.busform.shopname = data.title
				this.busform.shoplocation = data.address
			},
			tomap() {
				uni.navigateTo({
					url: '/pages/mine/shopmap/shopmap?shopname=' + this.busform.shopname
				})
			},
			onRest() {
				removeAllBusiImg().then(res => {
					this.fetchStuts()
				})

			},
			fetchStuts() {
				queryUserBusinessInfo().then(res => {
					const { data } = res
					this.$refs.form.resetFields();
					this.img_license = []
					this.img_shop = []
					this.img_display = []
					if (data) {
						this.busform.status = data.status
						this.busform.realname = data.realname
						this.busform.shopname = data.shopname
						this.busform.shoplocation = data.shoplocation
						if (data.licenseimgsrc) {
							this.img_license = [{
								url: basconfig.api_url + data.licenseimgsrc,
								status: 'success',
								message: '已上传'
							}]
						}
						if (data.doorimgsrc) {
							this.img_shop = [{
								url: basconfig.api_url + data.doorimgsrc,
								status: 'success',
								message: '已上传'
							}]
						}
						var _list =
							data.roomimgsrc ? data.roomimgsrc.split(',') : [] 
						this.img_display = []
						_list.forEach(arr => {
							this.img_display.push({
								url: basconfig.api_url + arr,
								status: 'success',
								message: '已上传'
							})
						})

					}
				})


			},
			onSave() {
				uploadBusinessInfo(this.busform).then(res => {
					const { code } = res
					if (code === 200) {
						uni.showToast({
							title: '发送成功，等待审核'
						})
						this.fetchStuts()
					}
				})
			},
			afterRead(e) {
				const { name, file } = e
				var fileData = []
				switch (name) {
					case 'license':
						fileData.push({ name: 'license', uri: file.url })
						this.img_license.push({
							...file,
							status: 'uploading',
							message: '上传中'
						})
						uploadBusinessImg(fileData, 'licenseimgsrc', this.busform.infoid).then(res => {
							const { code, data } = res
							if (code === 200) {
								this.busform.infoid = data.infoid
								this.img_license[0].status = 'success'
								this.img_license[0].message = '已上传'
							}
						})
						break
					case 'shop':
						fileData.push({ name: 'shop', uri: file.url })
						this.img_shop.push({
							...file,
							status: 'uploading',
							message: '上传中'
						})
						uploadBusinessImg(fileData, 'doorimgsrc', this.busform.infoid).then(res => {
							const { code, data } = res
							if (code === 200) {
								this.busform.infoid = data.infoid
								this.img_shop[0].status = 'success'
								this.img_shop[0].message = '已上传'
							}
						})
						break
					case 'display':
						let lists = [].concat(file)
						let fileListLen = this.img_display.length
						lists.map(item => {
							this.img_display.push({
								...item,
								status: 'uploading',
								message: '上传中'
							})
						})
						for (let i = 0; i < lists.length; i++) {

							fileData = [{
								name: 'roomimgsrc',
								uri: lists[i].url
							}]
							uploadBusinessImg(fileData, 'roomimgsrc', this.busform.infoid).then(res => {
								this.busform.infoid = res.data.infoid
								let item = this.img_display[fileListLen]

								item.status = 'success',
									item.message = '已上传'
								this.img_display.splice(fileListLen, 1, item)
								fileListLen++
							})

						}
						break
				}
			}
		}
	}
</script>

<style>
page{
	background: #fff;
}
.businessbtn{
	display: flex;
	justify-content:space-between;
	
}
.businessbtn .uv-button-wrapper{
	width: 48%;
}
</style>